'use client';
import { FC } from 'react';
import Example from './mdx.mdx';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { Button, Flex } from 'antd';
import { getFileApi } from './api';
import { downloadFile } from '@/utils/downloadFile';
export const meta = {
	title: 'vue Example',
	description: 'An example of using vue with Next.js'
};

type CodeProps = {
	className: string;
	children: string | string[];
};
// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

const Cookies = () => {
	const onDownloadFile = async (url: string) => {
		try {
			const response = await getFileApi(url);
			let fileName = response.headers['content-disposition'];
			downloadFile({ data: response.data, fileName });
		} catch (error) {
			console.log(error);
		}
	};
	return (
		<>
			<h1>插件下载</h1>
			<Flex gap="small" wrap>
				<Button type="primary" onClick={() => onDownloadFile('nhdogjmejiglipccpnnnanhbledajbpd_6.6.3_chrome.zzzmh.cn.crx')}>
					Vue.js devtools 下载
				</Button>
				<Button type="primary" onClick={() => onDownloadFile('fmkadmapgofadopljbjfkapdkoienihi_5.2.05_8_2024_chrome.zzzmh.cn.crx')}>
					React Developer Tools 下载
				</Button>
				<Button type="primary" onClick={() => onDownloadFile('gppongmhjkpfnbhagpmjfkannfbllamg_6.10.69_chrome.zzzmh.cn.crx')}>
					Wappalyzer - Technology profiler 下载
				</Button>
				<Button type="primary" onClick={() => onDownloadFile('lmhkpmbekcpmknklioeibfkpmmfibljd_3.1.6_chrome.zzzmh.cn.crx')}>
					Redux DevTools 下载
				</Button>
			</Flex>
			<Example components={{ Code }} />
		</>
	);
};

const Code: FC<CodeProps> = ({ className, ...properties }) => {
	const match = /language-(\w+)/.exec(className || '');
	return match ? <SyntaxHighlighter language={match[1]} PreTag="div" {...properties} /> : <code className={className} {...properties} />;
};

export default Cookies;
